﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <script>
        //ES6之前是这样的
        function add(a, b, c) {
            let total = a + b + c;
            return total;
        }
        add(1, 2, 3);

        //ES6你可以这么操作，提供了 rest 参数来访问多余变量
        function sum(...num) {
            let total = 0;
            for (let i = 0; i < num.length; i++) {
                total = total + num[i];
            }
            return total;
        }
        sum(1, 2, 3, 4, 6);

        //${}为模板字符
        var name = `id is ${aid} ${bid}`
        var url = `http://localhost:5000/api/values/${id}`;   //注意是反引号，英文输入下下的，Tab键上边的那个

        //但是在ES6中，可以使用反引号
        let jit = `
                fsadfsafsadf
                fsadfdsf
                fdsaf`;

        function foo() {
            var f2 = new foo2();
            console.log(f2);    //{a: 3}
            console.log(this); //window
            return true;
        }
        function foo2() {
            console.log(this); //foo2类型的对象 不是foo2函数
            return { a: 3 };
        }
        var f1 = foo();
        console.log(f1); // true

        var obj = {
            data: {
                books: "",
                price: 0,
                bookObj: null
            },
            init: function () {
                this.bind();
                this.popup();
                this.show();

            },
            show: function () {
                $(".content-title").html("");
                $(".content-title").html(this.data.books);
                $(".content-price").html(this.data.price);
            },
            bind: function () {
                var that = this;
                $(".content .content-list ").hover(function () {
                    $(this).find(".see").show();
                }, function () {
                    $(this).find(".see").hide();
                });

                $(".see").click(function () {
                    $(".bg,.popupbox").show();
                    that.data.bookObj = $(this);
                });

                $(".btn3,.cancel").click(function () {
                    $(".bg,.popupbox").hide();
                });

                $(".ok").click(function () {
                    var bookItem = that.data.bookObj;
                    var _parice = $(bookItem).data("price");
                    var _book = $(bookItem).data("book");
                    that.data.books += _book + ",";
                    that.data.price += parseInt(_parice);
                    that.show();
                });
            },
            popup: function () {
                var box = $(".popupbox");
                var _width = document.documentElement.clientWidth;
                var _height = document.documentElement.clientHeight;
                var $width = (_width - box.width()) / 2;
                var $height = (_height - box.height()) / 2;
                box.css({ "left": $width, "top": $height });
            },
            watch: {

            }
        };

        $(function () {
            obj.init();
        });

        var vm = new Vue(){
            el:'',
            data: {
                tasks:[]
            }
        }
    </script>
</body>
</html>